<template>
  <div>
    <PageHeader title="我们的服务" description="探索我们提供的各种服务和解决方案。" />

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
      <ServiceCard
          title="前端开发"
          icon="fa-code"
          description="使用最新的技术栈构建高性能、美观且用户友好的Web界面。"
          features="[
          '响应式设计',
          '交互开发',
          '性能优化',
          '无障碍支持'
        ]"
      />

      <ServiceCard
          title="UI/UX设计"
          icon="fa-paint-brush"
          description="创建直观、吸引人且符合用户体验最佳实践的界面设计。"
          features="[
          '用户研究',
          '原型设计',
          '视觉设计',
          '交互设计'
        ]"
      />

      <ServiceCard
          title="Web应用开发"
          icon="fa-cogs"
          description="构建功能完整、交互丰富的单页应用和多页应用。"
          features="[
          '状态管理',
          '路由实现',
          'API集成',
          '单元测试'
        ]"
      />

      <ServiceCard
          title="技术咨询"
          icon="fa-lightbulb-o"
          description="提供前端技术栈选择、架构设计和最佳实践方面的专业建议。"
          features="[
          '技术选型',
          '架构设计',
          '性能优化',
          '代码审查'
        ]"
      />
    </div>

    <div class="mt-12 bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
      <h2 class="text-xl font-semibold mb-4">为什么选择我们</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="flex flex-col items-center text-center p-4">
          <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
            <i class="fa fa-rocket text-2xl text-blue-500"></i>
          </div>
          <h3 class="text-lg font-semibold mb-2">高效开发</h3>
          <p class="text-gray-600">使用现代工具和工作流程，确保项目按时交付</p>
        </div>

        <div class="flex flex-col items-center text-center p-4">
          <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
            <i class="fa fa-code-fork text-2xl text-green-500"></i>
          </div>
          <h3 class="text-lg font-semibold mb-2">可扩展架构</h3>
          <p class="text-gray-600">设计易于维护和扩展的代码结构</p>
        </div>

        <div class="flex flex-col items-center text-center p-4">
          <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
            <i class="fa fa-headphones text-2xl text-purple-500"></i>
          </div>
          <h3 class="text-lg font-semibold mb-2">优质支持</h3>
          <p class="text-gray-600">提供项目交付后的持续支持和维护</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '../components/PageHeader.vue'
import ServiceCard from '../components/ServiceCard.vue'

export default {
  components: {
    PageHeader,
    ServiceCard
  }
}
</script>